<template>
	<view class="wdthdrawal">
		<view class="pagetitle">
			<uni-breadcrumb separator="/">
				<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
					{{route.name}}
				</uni-breadcrumb-item>
			</uni-breadcrumb>
			<view class="right">
				<view class="select">
					<uni-data-select
					   v-model="selectTimeVal"
					   :localdata="range2"
						@change="changeDateSelect2"
					></uni-data-select>
				</view>
				<view v-if="isPower(['admin'])" >
					<button size="mini" type=" " @click="goUrl('./add?shop_id='+shopId)" >
						新增
					</button>
				</view>
			</view>
		</view>
		<view class="warn" v-if="!loading" >
			<view class="titleApp ">
				{{shopdatas.title}}
			</view>
			<text>
				<text>余额：</text>
			</text>
			<text class="fontColorApp">
				￥{{(shopdatas.money?shopdatas.money/100:0).toFixed(2)  }} 
			</text>
			&nbsp;
			<text>
				<text>可提现余额 ：</text>
			</text>
			<text class="fontColorApp" >
				￥{{(shopdatas.withdrawable_money?shopdatas.withdrawable_money/100  : 0).toFixed(2)  }}
			</text>
		</view>
		<view class="table">
			<uni-table ref="table" :loading="loading"  :emptyText="data.length || '没有更多数据'"  stripe type="selection" @selection-change="selectionChange">
				<uni-tr>
					<uni-th  align="center">
						对方头像
					</uni-th>
					<uni-th  align="center">
						对方昵称
					</uni-th>
					<uni-th  align="center">
						账单说明
					</uni-th>
					<uni-th  align="center">
						金额 ￥
					</uni-th>
					<uni-th  align="center">
						结算状态
					</uni-th>
					<uni-th  align="center">
						订单号
					</uni-th>
					<uni-th  align="center">
						创建时间
					</uni-th>
					<uni-th   align="center">操作</uni-th>
				</uni-tr>
				
				<uni-tr v-for="(item, index) in data" :key="index" class="hoverBak" >
					<uni-td align="center">
						<image v-if="item.user.avatar" :src="item.user.avatar+'?x-oss-process=image/resize,m_fixed,h_100,w_100'" mode="widthFix" style="width:70rpx;height:70rpx;border-radius:5px" ></image>
					</uni-td>
					<uni-td align="center">
						<text class="titleApp">
							{{item.user.nickname}}
						</text>
					</uni-td>
					<uni-td align="center">
						{{item.text}}
					</uni-td>
					<uni-td align="center">
						<text class="fontColorApp" :style="`color:${item.type==1?'#ffc802':'#999'}`" >
						 	{{item.type==1?'+':'-'}}{{(item.price ?  item.price/100 :0   ).toFixed(2)}}
						</text>
					</uni-td>
					<uni-td align="center" >
						<view :style="`color:${item.is_account?'#01e73b':'#999'}`">
							{{item.is_account?'已结算':'未结算'}}
						</view>	
					</uni-td>
					<uni-td align="center">
						{{item.order.order_no}}
					</uni-td>
					<uni-td align="center">
						<uni-dateformat :date="item.create_date" ></uni-dateformat>
					</uni-td>
					
					<uni-td align="center" >
						<button size="mini" @click="goUrl('/pages/shop/shop_bill/detail?_uid='+item._id)" >
							详情
						</button>
					</uni-td>
				</uni-tr>
			</uni-table>
			
		</view>
		<view class="uni-pagination-box">
			<uni-pagination @change="enventFneye" :v-model="currentPage" :pageSize="limit" title="" :total="total"></uni-pagination>
		</view>
		
	</view>
</template>

<script>
	import Util from "@/js_sdk/validator/util.js"
	const global = uniCloud.importObject("global",{customUI:true})
	const db = uniCloud.database()
	let dayDate ;
	export default {
		data() {
			return {
				loading:true,
				routes: [
					{to: "/pages/index/index",name: "首页",},
					{to: "/pages/shop/shop/shop-info",name: "商铺信息" },
					{to: "",name: "商铺账单" }
				],
				shopId:'',
				// 分页
				total:0, //  总条数
				skip:0,// 开始查询位置
				limit:20, // 单词查询条数
				currentPage:1, // 当前页
				//a 日期下拉框
				selectTimeVal:0,
				queryCondition:{},
				range2:[
					{ "value": 0, "text": "全部账单" },
					{ "value": 1, "text": "支出" },
					{ "value": 2, "text": "收入" },
				],
				data:[],
				shopdatas:{}
			}
		},
		onLoad(e) {
			this.queryCondition = {
			  $or: []
			};
			// e._uid 必须是商铺id或者创建人id(用户表id)
			if (e._uid) {
				this.shopId = e._uid
				this.queryCondition.$or.push({});
				this.queryCondition.shop_id = e._uid,
				this.getData()
			}else {
				this.queryCondition.$or.push({});
				this.getData()
			}
			this.shopdata(e._uid)
		},
		methods: {
			shopdata(_uid){
				let shopField =  "_id,title,money,withdrawable_money"
				db.collection("shop" )
					.doc(_uid)
					.field(shopField)
					.get({getOne:true,customUI:true})
				.then(res=>{
					this.shopdatas = res.result.data
				})
			},
			getData(){
				this.loading = true
				let billField =  "_id,shop_id,order_no,price,is_settlement,order,text,user,is_account,is_settlement,type,create_date"
				db.collection("shop_bill" )
					.where(this.queryCondition)
					.field(billField)
					.orderBy("create_date desc")
					.skip(this.skip).limit(this.limit).get({getOne:false,getCount:true,customUI:true})
				.then(res=>{
					this.data = res.result.data
					this.total = res.result.count
					this.loading = false
				})
			},
			// 分页
			enventFneye(val){
				this.loading = true
				this.skip = (val.current-1)*20
				this.getData()
			},
			// 下拉框
			changeDateSelect(e){
				this.searchVal = e
				this.eventSearch()
			},
			changeDateSelect2(_value){
				switch (_value) {
					case 1 :
						this.queryCondition.business_status = true 
						this.queryCondition.disabled_status = true
						break;
					case 2 :
						this.queryCondition.business_status = false 
						this.queryCondition.disabled_status = true
						break;
					case 3 :
						this.queryCondition.disabled_status = false
						break;
					default:
						delete this.queryCondition.business_status;
						delete this.queryCondition.disabled_status;
						break ; 
				}
				
				this.getData()
			},
			/**
			 * 获取指定日期的开始和结束时间戳
			 * @returns {Object} - 返回包含开始时间戳和结束时间戳的对象
			 */
			getStartAndEndTimestamp() {
				const date = new Date(); 
				const sevenDaysAgo = new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000);
				const startTime = sevenDaysAgo.setHours(0, 0, 0, 0); // 将指定日期设置为零点，返回开始时间戳
				const endTime = date.setHours(23, 59, 59, 999); // 将指定日期设置为当天的结束，返回结束时间戳
				return { startTime: startTime, endTime: endTime };
			},
			navigateTo(url, clear) {
				// clear 表示刷新列表时是否清除页码，true 表示刷新并回到列表第 1 页，默认为 true
				uni.navigateTo({
					url,
					events: {
						refreshData: () => {
							this.loadData(clear)
						}
					}
				})
			},
			initMobile(mobile){
				return Util.formatPhoneNumber(mobile)
			},
			goUrl(Url){
				uni.navigateTo({
					url:Url
				})
			},
			isPower(admin=['']){
				return  Util.userHasPermission(admin)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.hoverBak{
	}
	.select{
		width:500rpx;
		margin:0 20rpx;
	}
	.pagetitle{
		padding:10rpx;
		display: flex; justify-content: space-between; align-items:center;
		.right{
			display:flex;
		}
	}
	.warn{
		padding:10rpx;
	}
	.item{
		padding:10rpx;
		margin:0rpx;
		border-bottom:1rpx solid #eee;
		display: flex; justify-content: space-between; align-items:center;
		.items{
			flex: 1;
			text-align: center;
		}
	}
	.title{
		font-size:16px;font-weight: bold;
	}
	.table{
		margin:50rpx 20rpx;
		border:1px solid #eee;
		border-bottom:none
	}
	.wdthdrawal{
		padding:20rpx;
		font-size:14px;
	}
</style>
